<template>
  <div class="map-show">
    <div class="top">
      <div class="box">
        <div>{{datas.all_dev_count?datas.all_dev_count:0}}</div>
        <div>前端设备总数</div>
      </div>
      <div class="box">
        <div>{{datas.all_site_count?datas.all_site_count:0}}</div>
        <div>全国安装场所总数</div>
      </div>
      <div class="box">
        <div>{{datas.all_site_count?datas.all_site_count-datas.sensor_demage_count:0}}</div>
        <div>报警场所数量</div>
      </div>
      <div class="box">
        <div>{{datas.sensor_demage_count?datas.sensor_demage_count:0}}</div>
        <div>无报警场所数量</div>
      </div>
      <div class="box">
        <div>{{datas.site_iemp_offline_count?datas.site_iemp_offline_count:0}}</div>
        <div>设备离线场所数量</div>
      </div>
      <div class="box">
        <div>{{datas.site_demage_count?datas.site_demage_count:0}}</div>
        <div>传感器异常场所数量</div>
      </div>
    </div>
    <!-- 地图 -->
    <div class="map" id="map">
      <img src="/static/image/monitor-center/new/red.png" class="red" alt>
      <img src="/static/image/monitor-center/new/blue.png" class="blue" alt>
    </div>
  </div>
</template>

<script>
import Config from '../../../config'
import location from '../../../util/location'
export default {
  name: 'MapShow',
  props: ['schedule'],
  data() {
    return {
      map: null,
      infoWindow: null, // 弹框
      DistrictSearch: null, // 行政规划
      datas: {}// 展示数据
    }
  },
  watch: {
    schedule(time) {
      // 获取数据
      this.stops()
      this.message()
    }
  },
  methods: {
    district() {
      this.map.plugin(['AMap.DistrictSearch'], () => {
        var opts = {
          extensions: 'all',  //返回行政区边界坐标组等具体信息
          level: 'country'  //查询行政级别为 市
        }
        let district = new AMap.DistrictSearch(opts)
        district.search('中国', (status, result) => {
          let polygons = [];
          var bounds = result.districtList[0].boundaries;
          if (bounds) {
            for (var i = 0, l = bounds.length; i < l; i++) {
              //生成行政区划polygon
              var polygon = new AMap.Polygon({
                strokeWeight: 1,
                path: bounds[i],
                fillOpacity: 0.4,
                fillColor: '#80d8ff',
                strokeColor: '#0091ea'
              });
              polygons.push(polygon);
            }
          }
          // this.map.add(polygons)
          this.map.setFitView(polygons);//视口自适应
        })
      })
    },
    // 地图
    handler() {
      //创建地图
      this.map = new AMap.Map("map", {
        center: [106.299012, 32.957237], //设置中心点
        resizeEnable: true, //是否监控地图容器尺寸变化
        features: ["bg", "road", "point"], //隐藏默认楼块
        mapStyle: "amap://styles/9776efdcac6a9b4478abd17d2c4fb8ef",
        zoom: 5 //地图显示的缩放级别
      });

      // 显示至全国
      // this.district()  

    },
    // 获取数据
    stops() {
      let url = `${Config.DEVICE_MANAGE_URL}/device_equip_site/query_for_map`
      let param = {
        devtype: Config.objType.devtype,
        country: '86',
        site_type: 'official'
      }
      this.$http.get(url, param).then((res) => {
        // 清空覆盖物
        this.map.clearMap()

        let arr = []
        // 处理的数据
        res.array.map((item, i) => {
          let obj = {}
          obj.center = location.bd_decrypt(item[3], item[4]) // 经纬度
          obj.id = item[0] // id
          obj.name = item[1] // 场所名称
          obj.number = item[5] // 安装数量
          obj.on_line = item[6] // 在线数量
          obj.normal = item[7] // 正常数量
          obj.fireplug = item[8] // 消防
          obj.scm = item[9] // 烟感

          obj.animation = 'warn' // 动画

          // 判断红蓝
          if (obj.number === obj.on_line && obj.number === obj.normal) {
            obj.color = '#13FFFC'
            obj.type = '正常'
          } else {
            obj.color = '#FF5353'
            obj.type = '异常'
          }
          arr.push(obj)
        })

        // 画点
        this.drawing(arr)
      })
    },
    // 画点
    drawing(arr) {
      for (var i = 0; i < arr.length; i += 1) {
        var text = new AMap.Text({
          text: ' ',
          textAlign: 'center',
          verticalAlign: 'middle', //middle 、bottom
          // draggable: true,
          cursor: 'pointer',
          style: {
            'width': '6px',
            'height': '8px',
            'border-radius': '50%',
            'border': '0',
            'background-color': arr[i].color,
            // 'box-shadow': '0px 0px 10px 2px ' + this.capitals[i].color,
            // 'animation': capitals[i].animations+' 1s infinite',
            // 'animation': 'myfirst 1s infinite'
          },
          position: arr[i].center
        })
        text.setMap(this.map);

        var text1 = new AMap.Text({
          text: ' ',
          textAlign: 'center',
          verticalAlign: 'middle', //middle 、bottom
          // draggable: true,
          cursor: 'pointer',
          style: {
            'width': '16px',
            'height': '18px',
            'border-radius': '50%',
            'border-color': arr[i].color,
            'background': 'transparent',
            'box-shadow': ' inset 0px 0px 10px 2px ' + arr[i].color,
            'animation': arr[i].animation + ' 2s linear infinite',
            // 'animation': 'myfirst 1s infinite'
          },
          position: arr[i].center
        })
        text1.setMap(this.map);

        var text2 = new AMap.Text({
          text: ' ',
          textAlign: 'center',
          verticalAlign: 'middle', //middle 、bottom
          // draggable: true,
          cursor: 'pointer',
          style: {
            'width': '30px',
            'height': '32px',
            'border-radius': '50%',
            'border-color': arr[i].color,
            'background': 'transparent',
            'box-shadow': ' inset 0px 0px 10px 2px ' + arr[i].color,
            'animation': arr[i].animation + ' 2s linear infinite',
            // 'animation': 'myfirst 1s infinite'
          },
          position: arr[i].center,
          arr: arr[i]
        })
        text2.setMap(this.map);

        // 弹框
        text2.on('mouseover', this.mouseover)
        text2.on('mouseout', this.mouseout)
      }
    },
    mouseover(e) {
      let url = `${Config.DEVICE_MANAGE_URL}/site_user/query`;
      let param = {
        site_id: e.target.B.arr.id
      };
      this.$http.get(url, param).then(res => {
        if (res.array.length) {
          let obj = res.array[0]

          let content = [];
          content.push(`<ul class="window">
          <li>
            <span style="width:30%;float:left;">场&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所:</span>
            <span style="width:70%;float:right;">${obj.site_name ? obj.site_name : ''}</span> 
          </li>
          <li>
            <span style="width:30%;float:left;">场所地址:</span>
            <span style="width:70%;float:right;line-height: 13px;padding-top: 3px;">${obj.address ? obj.address : ''}</span> 
          </li>
          <li>
            <span style="width:30%;float:left;">联&nbsp;&nbsp;系&nbsp;&nbsp;人:</span>
            <span style="width:70%;float:right;">${obj.name ? obj.name : ''}</span> 
          </li>
          <li>
            <span style="width:30%;float:left;">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态:</span>
            <span style="width:70%;float:right;">${e.target.B.arr.type}</span> 
          </li>
        </ul>`)

          this.infoWindow = new AMap.InfoWindow({
            isCustom: true,  //使用自定义窗体
            content: this.createInfoWindow(content),
            offset: new AMap.Pixel(0, -10)
          });

          // 打开弹框
          this.infoWindow.open(this.map, e.target.B.position);
        } else {
          this.$message('未查到信息');
        }
      }).catch((e) => {
        this.$message('未查到信息');
      })

    },
    // 自定义弹框
    createInfoWindow(content) {
      var info = document.createElement("div");
      info.className = "custom-info input-card content-window-card";

      //可以通过下面的方式修改自定义窗体的宽高
      //info.style.width = "400px";
      // 定义顶部标题


      // 定义中部内容
      var middle = document.createElement("div");
      middle.className = "info-middle";
      middle.innerHTML = content;
      info.appendChild(middle);

      // 定义底部内容

      return info;
    },
    // 地图点击关闭弹框
    mouseout(e) {
      this.map.clearInfoWindow();
    },

    message(){
      let url = `${Config.DEVICE_MANAGE_URL}/monitoring_center/count`;
      let param = {
        site_type: "official"
      };
      this.$http.get(url, param).then(res=> {
        this.datas = res
        console.log(res)
      })
    }
  },
  mounted() {
    this.handler()
    
  }
}
</script>

<style lang="scss">
.map-show {
  width: 100%;
  height: 100%;
  // background: #fff;
  .top {
    width: 100%;
    height: 48px;
    // background: blue;
    margin-top: 7px;
    .box {
      width: 116px;
      height: 100%;
      background: url("/static/image/monitor-center/new/map-box.png") no-repeat;
      float: left;
      margin-right: 7px;
      div:first-child {
        color: #00e9ff;
        text-align: center;
        font-size: 20px;
        margin-top: 2px;
      }
      div:last-child {
        color: #598cc9;
        text-align: center;
        font-size: 12px;
      }
    }
    :last-child {
      margin-right: 0;
    }
  }
  // 地图
  .map {
    left: 1px;
    position: absolute;
    width: 762px;
    height: 430px;
    // 动画
    @keyframes warn {
      0% {
        transform: scale(0.3);
        opacity: 0.3;
      }
      50% {
        transform: scale(1);
        opacity: 0.4;
      }
      100% {
        transform: scale(0.3);
        opacity: 0.3;
      }
    }
    // 弹框内容
    .window {
      padding: 14px 16px;
      box-sizing: border-box;
      li {
        overflow: hidden;
        width: 100%;
        line-height: 16px;
        font-size: 12px;
        color: #13fffc;
        margin-bottom: 6px;
        span {
          word-wrap: break-word;
        }
      }
      :last-child {
        margin: 0;
      }
    }
    // 弹框样式
    .info-middle {
      width: 240px;
      height: 127px;
      background: url("/static/image/monitor-center/new/info.png") no-repeat -10px -22px;
    }

    // 点
    .blue {
      position: absolute;
      right: 24px;
      bottom: 50px;
      z-index: 1;
    }
    .red {
      position: absolute;
      right: 24px;
      bottom: 10px;
      z-index: 1;
    }
  }
}
</style>
